import React from 'react';
import { useDrag } from 'react-dnd';
import uiCompt from '@/ui-components/index';
import './index.less';

/*
item: {
  category: // 类型 "resourceLibrary" | "componentLibrary"
  config: {name: '4Vocabulary 词汇预习', round: 0, borderWidth: 0, borderColor: 'rgba(255,255,255,1)', padding: 0, …} // 默认属性值
  name: "4Vocabulary 词汇预习" // 显示名称
  componentName: "富文本" // 组件名称
  type: "RichText" // 组件类型
}
*/
interface DragTargetProps {
  item: any;
  children: React.ReactNode; // 渲染的内容
  canvasId: string;
}
const { schemaH5 } = uiCompt;
const DragTarget = (props: DragTargetProps) => {
  const { item } = props;
  const { category, component } = item;
  const [{ isDragging }, drag] = useDrag({
    item: {
      ...(schemaH5 as any)[component],
      ...item,
    },
    type: component,
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult();
      if (item && dropResult) {
        console.log(`你拖拽了 ${item.config.name}`);
      }
    },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });
  return (
    <div
      ref={drag}
      style={{
        opacity: isDragging ? 0.4 : 1,
      }}
    >
      {props.children}
    </div>
  );
};

export default DragTarget;
